<template>
  <el-scrollbar style="height:100%">

    <div class="detail-panel-container">
      <div class="detail-panel-item">
        <el-divider direction="vertical" class="detail-panel-item-title-line"></el-divider>
        <span class="detail-panel-item-title">
          职称
        </span>
        <el-timeline class="experience-timeline" v-if="jobTitles&&jobTitles.length>0">
          <el-timeline-item
            v-for="(item, index) in jobTitles"
            :key="index"
            :timestamp="item.timestamp">
            {{item.content}}
          </el-timeline-item>
        </el-timeline>
        <div v-else class="detail-empty-data">暂无数据</div>
      </div>
      <div class="detail-panel-item">
        <el-divider direction="vertical" class="detail-panel-item-title-line"></el-divider>
        <span class="detail-panel-item-title">
          资格证书
          <el-button type="text" @click="addCertificate(certificateType.CERTIFICATE)">新增</el-button>
        </span>
        <el-table :data="certificateData" style="width: 100%">
          <el-table-column prop="employeeCertificateName" label="证书名称" align="center"></el-table-column>
          <el-table-column prop="employeeCertificateLevel" label="等级" width="180" align="center"></el-table-column>
          <el-table-column prop="employeeCertificateOrganization" label="发证单位" align="center"></el-table-column>
          <el-table-column prop="employeeCertificateGetTime" label="获得日期" width="180" align="center"></el-table-column>
          <el-table-column label="附件" width="180" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="downloadAllFiles(scope.row.employeeCertificateId,null)"
                v-hasPermi="['system:menu:edit']"
              >
                下载附件
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="editCertificate(scope.row,certificateType.CERTIFICATE)"
                v-hasPermi="['system:menu:edit']"
              >
                修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="del(scope.row)"
                v-hasPermi="['system:menu:remove']"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="certificateCurrentChange"
          :page-size="certificateQueryParams.size"
          :current-page="certificateQueryParams.current"
          layout="total, prev, pager, next, jumper"
          :total="certificateTotal">
        </el-pagination>
      </div>
      <div class="detail-panel-item">
        <el-divider direction="vertical" class="detail-panel-item-title-line"></el-divider>
        <span class="detail-panel-item-title">
          技能证书
          <el-button type="text" @click="addCertificate(certificateType.SKILL)">新增</el-button>
        </span>
        <el-table :data="skillCertificateData" style="width: 100%">
          <el-table-column prop="employeeCertificateName" label="证书名称"  align="center"></el-table-column>
          <el-table-column prop="employeeCertificateLevel" label="等级" width="180" align="center"></el-table-column>
          <el-table-column prop="employeeCertificateOrganization" label="发证单位" align="center"></el-table-column>
          <el-table-column prop="employeeCertificateGetTime" label="获得日期" width="180" align="center"></el-table-column>
          <el-table-column label="附件" width="180" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="downloadAllFiles(scope.row.employeeCertificateId,null)"
                v-hasPermi="['system:menu:edit']"
              >
                下载附件
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="editCertificate(scope.row,certificateType.SKILL)"
                v-hasPermi="['system:menu:edit']"
              >
                修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="del(scope.row)"
                v-hasPermi="['system:menu:remove']"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="skillCurrentChange"
          :current-page="skillQueryParams.current"
          layout="total, prev, pager, next, jumper"
          :page-size="skillQueryParams.size"
          :total="skillTotal">
        </el-pagination>
      </div>
      <certificateedit v-if="editCertificateData.open" :prop="editCertificateData" @close="closeCertificate"></certificateedit>
      <downloadfile v-if="downloadData.open" :prop="downloadData"></downloadfile>
    </div>
  </el-scrollbar>
</template>

<script>
import {getPageList,del} from '@/api/employee/employeeCertificate/employeeCertificate.js'
import certificateedit from '@/views/employee/employee/components/certificate/certificateEdit.vue'
import downloadfile from '@/views/components/DownloadAllFile/downloadFile.vue'
import {certificateCategory} from '@/utils/constants/common/constants.js'
export default {
  name: "Certificate",
  dicts:[],
  components: { certificateedit ,downloadfile},
  props:{
    prop:{
      type:Object,
      default:function(){
        return {
          employeeId:null,
          employeeCode:null,
        }
      }
    }
  },
  data() {
    return {
      jobTitles:[],
      certificateQueryParams:{
        current:1,
        size:3,
        employeeId:this.prop.employeeId,
        employeeCertificateCategory:certificateCategory[2].value
      },
      certificateTotal:0,
      certificateData:[],
      skillQueryParams:{
        current:1,
        size:3,
        employeeId:this.prop.employeeId,
        employeeCertificateCategory:certificateCategory[3].value
      },
      skillTotal:0,
      skillCertificateData:[],
      certificateType:{
        CERTIFICATE:certificateCategory[2].value,
        SKILL:certificateCategory[3].value
      },
      editCertificateData:{
        open:false,
        title:'新增资格证书',
        categoryId:null,
        employeeId:null,
        id:null,
      },
      downloadData:{
        open:false,
        title:'下载附件',
        id:null,
        typeId:null
      },
    };
  },
  methods: {
    getCertificatePageList(){
      getPageList(this.certificateQueryParams).then((res) => {
        if (res.code == 200) {
          this.certificateData = res.data.records;
          this.certificateTotal = res.data.total;
        }
      }).catch(err =>{
        console.log('加载员工合同列表数据失败，原因：',err)
      })
    },
    getSkillPageList(){
      getPageList(this.skillQueryParams).then((res) => {
        if (res.code == 200) {
          this.skillCertificateData = res.data.records;
          this.skillTotal = res.data.total;
        }
      }).catch(err =>{
        console.log('加载员工合同列表数据失败，原因：',err)
      })
    },
    // 翻页
    certificateCurrentChange(val) {
      this.certificateQueryParams.current = val;
      this.getCertificatePageList();
    },
    // 翻页
    skillCurrentChange(val) {
      this.skillQueryParams.current = val;
      this.getSkillPageList();
    },
    //打开资格证书/技能证书面板
    addCertificate(categoryId){
      let data = {open:true,title:'新增工作经历',categoryId:categoryId,employeeId:this.prop.employeeId,employeeCertificateId:null}
      if(categoryId === this.certificateType.CERTIFICATE){
        data.title = '新增资格证书'
      }else{
        data.title = '新增技能证书'
      }
      this.editCertificateData = {...data}
    },
    //打开资格证书/技能证书面板
    editCertificate(row,categoryId){
      let data = {open:true,title:'修改资格证书',categoryId:categoryId,employeeId:this.prop.employeeId,employeeCertificateId:row.employeeCertificateId}
      if(categoryId === this.certificateType.CERTIFICATE){
        data.title = '修改资格证书'
      }else{
        data.title = '修改技能证书'
      }
      this.editCertificateData = {...data}
    },
    //打开资格证书/技能证书面板
    closeCertificate(isEdit,type){
      let data = {open:false,title:'新增资格证书',categoryId:null,employeeId:this.prop.employeeId,employeeCertificateId:null}
      this.editCertificateData = {...data}
      if(isEdit){
        if(type===this.certificateType.CERTIFICATE){
          this.getCertificatePageList()
        }else{
          this.getSkillPageList()
        }
      }
    },
    /** 删除按钮操作 */
    del(row) {
      this.$confirm('是否删除该证件？','确认信息',{
        distinguishCancelAndClose: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then(()=>{
        del({employeeContractId:row.employeeContractId}).then(res =>{
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.getPageList()
        })
      }).catch(action => {

      });
    },
    downloadAllFiles(id,typeId){
      this.downloadData = {
        open:true,
        title:'下载附件',
        id:id,
        typeId:typeId
      }
    },
    closeDetail(){
      this.detailOpen = false
      this.detailData.id = null
    }
  },
  mounted() {
    this.getCertificatePageList()
    this.getSkillPageList()
  },
  updated() {

  }
};
</script>
<style scoped>
  .detail-panel-item{
    margin: 5px 20px;
  }
  .detail-panel-item-title-line{
    background-color: #000000;
    margin-left: 0;
    margin-right: 0;
  }
  .detail-panel-item-title{
    font-weight:bold;
  }
  .detail-empty-data{
    width: 10vw;
    margin-top: 10px;
    margin-left: 15px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 100;
  }
</style>
